<template>
  <div>
    <!-- 搜索栏 -->
    <VForm
      v-model="search.model"
      :inline="true"
      :config="search.config"
      v-on="$listeners"
    />
    <!-- 列表 -->
    <el-table
      :data="table.tableData"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, idx) in table.tableConfig"
        :key="idx"
        :label="item.label"
      >
        <template slot-scope="{row}">
          <p v-if="!item.slot">
            {{ row[item.prop] }}
          </p>
          <slot
            v-else
            :name="item.slot"
            :row="row"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: right; margin-top: 10px"
      v-bind="$attrs"
      v-on="$listeners"
    />
  </div>
</template>

<script>
export default {
    name: "SearchTableTpl",
    components: {
        VForm: () => import("../VForm"),
    },
    props: {
        searchConfig: {
            type: Array,
            default: () => []
        },
        searchModel: {
            type: Object,
            default: () => ({})
        },
        tableConfig: {
            type: Array,
            default: () => [{
                label: '角色',
                prop: 'roleName',
                slot: ''
            }]
        },
        tableData: {
            type: Array,
            default: () => [{ roleName: '超级管理员' }]
        }
    },
    data() {
        return {
            search: {
                config: [
                    {
                        label: '用户名',
                        prop: 'userName',
                        placeholder: '请输入用户名',
                        type: 'input',
                    }
                ],
                model: {
                    userName: '1',
                }
            },
            table: {
                tableConfig: [],
                tableData: []
            }
        }
    },
    watch: {
        searchModel: {
            handler(val) {
                this.search.model = val
            },
            deep: true,
            immediate: true
        },
        searchConfig: {
            handler(val) {
                this.search.config = val
            },
            deep: true,
            immediate: true
        },
        tableConfig: {
            handler(val) {
                console.log("gshgsgfh", val)
                this.table.tableConfig = val
            },
            deep: true,
            immediate: true
        },
        tableData: {
            handler(val) {
                this.table.tableData = val
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        onSearch() { },
        onReset() { }
    }
}
</script>

<style lang="scss" scoped></style>